<template>
    <div class="box">
      <!-- 表格拖拽移动列 -->
      <div class="list-group">
        <table class="table table-striped">
          <thead class="thead-dark">
            <draggable v-model="headers" tag="tr">
              <th v-for="header in headers" :key="header" width="100" scope="col">{{ header }}</th>
            </draggable>
          </thead>
        
          <tbody>
            <tr v-for="item in list" :key="item.id">
              <td v-for="header in headers" :key="header" width="100">{{ item[header] }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
</template>

<script>
import draggable from 'vuedraggable'
const message = [
  "vue.draggable",
  "draggable",
  "component",
  "for",
  "vue.js 2.0",
  "based",
  "on",
  "Sortablejs"
];
export default {
  name: 'dragable',
  components: {
    draggable
  },
  data () {
    return {
      headers: ["id", "name", "sport"],
      list: [
        { id: 1, name: "Abby", sport: "basket" },
        { id: 2, name: "Brooke", sport: "foot" },
        { id: 3, name: "Courtenay", sport: "volley" },
        { id: 4, name: "David", sport: "rugby" }
      ],
    }
  },
  computed: {
    dragOptions() {
      return {
        // 把animation改成200，就是另一种过渡效果
        animation: 200,
        group: 'description',
        disabled: false,
        ghostClass: "ghost"
      }
    }
  },
  props: {
  },
  watch: {
  },
  created () {
  },
  mounted () { },
  methods: {
  }
}
</script>
<style scoped lang='less'>
.table .thead-dark {
  color: #fff;
  background-color: #343a40;
  border-color: #454d55;
}
.table th {
  width: 200px;
}
</style>
